var searchBtn = document.getElementById('search');
var cityIpt = document.getElementById('city');
var tbody = document.getElementById('content');

//点击按钮事件
searchBtn.onclick = function() {
    //获取输入框内容
    var city = cityIpt.value;
    //根据内容拼接url
    var url = `http://wthrcdn.etouch.cn/weather_mini?city=${city}`

    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.send()
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr)

            //把接收到的json字符串转换成对象
            var data = JSON.parse(xhr.responseText).data
            console.log(data)
            showWeather(data)

        }
    }

}

function showWeather(data) {
    var weatherArray = data.forecast;
    var html = '';
    weatherArray.forEach(function(item) {
        var fengli = item.fengli.match(/\d+级/)[0]
        var tr = ` <tr>
        <td>${item.date}</td>
        <td>${fengli}</td>
        <td>${item.fengxiang}</td>
        <td>${item.high}</td>
        <td>${item.low}</td>
        <td>${item.type}</td>
        </tr>`
        html += tr
    })
    tbody.innerHTML = html

}